import React from 'react'
import MenuItem from './MenuItem'
import SubMenuItem from './SubMenuItem'
import {connect} from 'react-redux'
import * as StringUtils from '../../public/js/stringUtils'

class LeftSidebar extends React.Component {
    constructor(props) {
        super(props)
    }

    renderSubItem(parent,childs) {
        let childComponets = []
        for(let i=0; i<childs.length; i++) {
            let item = (<SubMenuItem key={'menu_subitem_' + i} menu={childs[i]} menuId={childs[i].id}/>)
            childComponets.push(item)
            updateMenuInfo(parent, childs[i])
        }
        return childComponets
    }

    renderMenu() {
        let menuItems = [],menus = this.props.menus
        
        for(let i  = 0; i< menus.length; i ++) {
            let menu = menus[i], menuComponent = {}
            if(menu['child'] != null) {
                let subMenuItem = this.renderSubItem(menu,menu.child)
                menuComponent = (
                    <MenuItem menuName = {menu.name} menuId = {menu.id} key={'menu_parentmenu_' + i}>
                        {subMenuItem}
                    </MenuItem>
                )
            } else {
                menuComponent = (
                    <SubMenuItem menu = {menu} key={'menu_subitem_' + i} menuId = {menu.id}/>
                )

                updateMenuInfo({id:0}, menu)
            }
            menuItems.push(menuComponent)
        }
        return menuItems
    }
    
    render() {
        return (
            <aside className="left-sidebar">
                <div className="scroll-sidebar">
                    <nav className="sidebar-nav">
                        <ul id="sidebarnav">
                            <li>
                                <div className="user-profile dropdown m-t-20">
                                    <div className="user-pic">
                                        <img src="static/images/users/1.jpg" alt="users" className="rounded-circle img-fluid" />
                                    </div>
                                    <div className="user-content hide-menu m-t-10">
                                        <h5 className="m-b-10 user-name font-medium">YoTest.Yuan</h5>
                                        <a href="javascript:void(0)" title="退出" className="btn btn-circle btn-sm" onClick={()=>{logout()}}>
                                            <i className="ti-power-off"></i>
                                        </a>
                                    </div>
                                </div>
                            </li>
                            {this.renderMenu()}
                        </ul>
                    </nav>
                </div>
            </aside>
        )
    }
}
function mapStateToProps(state) {
    return {
      menus: state.menus
    }
  }
export default connect(mapStateToProps)(LeftSidebar)